<style >
    .page {
        text-align: right;margin-top: 10px
    }
    .layout{
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
    }
    .mb20 {
        margin-bottom: 20px;
    }
    .layout-logo{
        width: 110px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 0px;
        left: 0px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .layout-footer-center{
        text-align: center;
    }
    .content{
        height: auto;
        background-color:white;
        padding-left: 30px;
        padding-right: 30px;
    }
    .items{
        height:40px;
        line-height:40px
    }
    .info{
        height: auto;
        background-color:#F8F8FF;
        padding-left: 70px;
        padding-right: 70px;
    }
    .header{
        height: 40px;
        background-color: white;
        line-height: 40px;
        border-bottom: 1px solid orangered;
    }
    .info-middle{
        height: 300px;
        background-color: #F8F8FF;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 15px;
    }
    .titles{
        height: 35px;
        background-color: black;
        line-height: 35px;
        font-size: 1rem;
        color: white;
        padding-left: 10px;
    }
    .nopadding .ivu-table-cell {
        padding: 0px 0px;
    }
    .head_btn {
        height:45px;
        line-height:45px;
        width: 130px;
        float: left;
        margin-right: 20px;
    }
    .subsidy-img {
        height: 140px;
        width: 120px;
        position: absolute;
        right: 8%;
        top: 11%;
    }
    .red_color {
        color: red;
        font-size: 15px;
    }
    .centerimg {
        text-align: center;
    }
    .pre_img_style {
        height:500px;
        width:auto;
        max-width: 500px;
    }
</style>

<template>
    <div>
      <div style="margin-top: 20px">
        <Table border :columns="columns1" :data="data6">
          <!-- <template slot-scope="{ row }" slot="check_state">
              <strong  v-if="row.check_state == '1'" style="color: red">已超时</strong>
              <strong  v-else>未超时</strong>
          </template> -->
        </Table>
      </div>
      <div  class="page">
          <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style"/>
      </div>
      <Modal v-model="modal1" title="详情" width="800">
        <Form label-position="right" :label-width="100">
          <Row class="mb20">
            <Col span="8" class="ivu-form-item-label">发放截止月份：</Col>
            <Col span="12" class="ivu-form-item-content">
              <Select v-model="formDate.endMonth" style="width:280px">
                <Option v-for="item in monthList" :value="item.value" :key="item.value"> {{item.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="mb20">
            <Col span="8" class="ivu-form-item-label">停发原因：</Col>
            <Col span="12" class="ivu-form-item-content">
              <Select v-model="formDate.reason" style="width:280px">
                <Option v-for="item in reasonList" :value="item.value" :key="item.value"> {{item.label}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="mb20">
            <Col span="8" class="ivu-form-item-label">备注：</Col>
            <Col span="9" class="ivu-form-item-content">
              <Input v-model="formDate.remark" type="textarea" :rows="4" placeholder="" />
            </Col>
          </Row>
        </Form>
        <div slot="footer">
          <Button type="info" @click="saveForm()">确定</Button>
          <Button @click="modal1=false">关闭</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
import { } from '@/api/stree'
// import { findRegisterInfo, findOrphanByCard } from '@/libs/util'
export default {
  data () {
    return {
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      dateTime: '',
      searchDate: {
        name: '',
        code: '',
        start_time: '',
        end_time: ''
      },
      modal1: false,
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'

        },
        {
          title: '事项名称',
          key: 'title',
          align: 'center',
          width: 230

        },
        {
          title: '业务编号',
          key: 'code',
          align: 'center',
          width: 180
        },
        {
          title: '申请人',
          key: 'name',
          align: 'center',
          width: 100
        },

        {
          title: '身份证号',
          key: 'cardno',
          align: 'center',
          width: 180
        },
        {
          title: '补贴金额',
          key: 'shorhl',
          align: 'center',
          width: 120
        },
        {
          title: '申请时间',
          key: 'create_time',
          align: 'center',
          width: 140
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.uploadPic()
                  }
                }
              }, '上传要件'),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.uploadPicHeigh()
                  }
                }
              }, '高拍仪')
            )
            return h('div', temp)
          }
        }
      ],
      data6: [
        {
          'title': '1',
          'code': '2',
          'name': '3',
          'cardno': '4',
          'shorhl': '80',
          'create_time': '2020-08-20'
        }
      ],
      formDate: {},
      monthList: [
        {
          value: '2020-08'
        }
      ],
      reasonList: [
        {
          label: '死亡',
          value: '1'
        },
        {
          label: '户籍迁出',
          value: '2'
        },
        {
          label: '残疾等级变更',
          value: '3'
        },
        {
          label: '刑事判决',
          value: '4'
        },
        {
          label: '不再符合条件',
          value: '5'
        },
        {
          label: '其他',
          value: '6'
        }
      ],
      errorTitle: '错误提醒'
    }
  },
  methods: {
    // 疑点数据列表
    init () {
      getstreelist({}).then(ret => {
        if (ret.data.errcode === 0) {
          this.totalnum = ret.data.data.totalRecord
          this.data6 = ret.data.data.results
          return
        }
        this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
      })
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    uploadPic () { // 上传要件
      this.modal1 = true
    },
    uploadPicHeigh () { // 高拍仪
      console.log('高拍仪')
    },
    saveForm () { // 提交申请
      if (this.formDate.endMonth === '' || this.formDate.endMonth === undefined) {
        const content = '<p>请选择发放截止月份</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.formDate.reason === '' || this.formDate.reason === undefined) {
        const content = '<p>请选择停发原因</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.formDate.reason === '6') {
        if (this.formDate.remark === '' || this.formDate.remark === undefined) {
          const content = '<p>请填写备注</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
        }
      }
      // getstreelist({}).then(ret => { // 调用提交申请接口
      //   if (ret.data.errcode === 0) {
      //     this.modal1 = false
      //     this.init()
      //     return
      //   }
      //   this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
      // })
    }
  },
  mounted () {
    // this.init()
  }
}
</script>
